<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <el-menu :default-active="menuActiveName || 'AiImage'" :collapse="sidebarFold" :collapseTransition="false"
        class="site-sidebar__menu">
        <el-menu-item index="AiImage" @click="$router.push({ name: 'home' })">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="demo">
          <template slot="title">
            <icon-svg name="ai" class="site-sidebar__menu-icon"></icon-svg>
            <span>AI</span>
          </template>
          <el-menu-item index="AiImage" @click="$router.push({ name: 'AiImage' })">
            <icon-svg name="ai" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">AiImage</span>
          </el-menu-item>

        </el-submenu>

        <el-submenu index="galaxyUser">
          <template slot="title">
            <icon-svg name="admin" class="site-sidebar__menu-icon"></icon-svg>
            <span>用户管理</span>
          </template>
          <el-menu-item index="wmhGalaxyUser" @click="$router.push({ name: 'wmhGalaxyUser' })">
            <icon-svg name="admin" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">用户管理</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="galaxyInvitationCode">
          <template slot="title">
            <icon-svg name="style" class="site-sidebar__menu-icon"></icon-svg>
            <span>邀请码管理</span>
          </template>
          <el-menu-item index="wmhGalaxyInvitationCode" @click="$router.push({ name: 'wmhGalaxyInvitationCode' })">
            <icon-svg name="style" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">邀请码管理</span>
          </el-menu-item>
        </el-submenu>

         <el-submenu index="galaxyImage">
          <template slot="title">
            <icon-svg name="image" class="site-sidebar__menu-icon"></icon-svg>
            <span>生成图管理</span>
          </template>
          <el-menu-item index="wmhGalaxyImage" @click="$router.push({ name: 'wmhGalaxyImage' })">
            <icon-svg name="image" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">生成图管理</span>
          </el-menu-item>
        </el-submenu>

<!--         <el-submenu index="galaxyItem">-->
<!--          <template slot="title">-->
<!--            <icon-svg name="item" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span>商品管理</span>-->
<!--          </template>-->
<!--          <el-menu-item index="wmhGalaxyItem" @click="$router.push({ name: 'wmhGalaxyItem' })">-->
<!--            <icon-svg name="item" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span slot="title">商品管理</span>-->
<!--          </el-menu-item>-->
<!--        </el-submenu>-->

         <el-submenu index="galaxyMaterial">
          <template slot="title">
            <icon-svg name="material" class="site-sidebar__menu-icon"></icon-svg>
            <span>素材管理</span>
          </template>
          <el-menu-item index="wmhGalaxyMaterial" @click="$router.push({ name: 'wmhGalaxyMaterial' })">
            <icon-svg name="material" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">素材管理</span>
          </el-menu-item>
          <el-menu-item index="wmhGalaxyFont" @click="$router.push({ name: 'wmhGalaxyFont' })">
            <icon-svg name="font" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">字体管理</span>
          </el-menu-item>
        </el-submenu>

        <el-submenu index="galaxyCategory">
          <template slot="title">
            <icon-svg name="category" class="site-sidebar__menu-icon"></icon-svg>
            <span>分类管理</span>
          </template>
          <el-menu-item index="wmhGalaxyCategory" @click="$router.push({ name: 'wmhGalaxyCategory' })">
            <icon-svg name="category" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">分类管理</span>
          </el-menu-item>
        </el-submenu>

          <el-submenu index="galaxyOrder">
          <template slot="title">
            <icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
            <span>订单管理</span>
          </template>
          <el-menu-item index="wmhGalaxyOrder" @click="$router.push({ name: 'wmhGalaxyOrder' })">
            <icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">订单管理</span>
          </el-menu-item>
        </el-submenu>

<!--          <el-submenu index="galaxyProduct">-->
<!--          <template slot="title">-->
<!--            <icon-svg name="product" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span>生产单管理</span>-->
<!--          </template>-->
<!--          <el-menu-item index="wmhGalaxyProduct" @click="$router.push({ name: 'wmhGalaxyProduct' })">-->
<!--            <icon-svg name="product" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span slot="title">生产单管理</span>-->
<!--          </el-menu-item>-->
<!--        </el-submenu>-->

          <el-submenu index="galaxyStyle">
          <template slot="title">
            <icon-svg name="style" class="site-sidebar__menu-icon"></icon-svg>
            <span>风格管理</span>
          </template>
          <el-menu-item index="wmhGalaxyStyle" @click="$router.push({ name: 'wmhGalaxyStyle' })">
            <icon-svg name="style" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">风格管理</span>
          </el-menu-item>
        </el-submenu>

          <el-submenu index="galaxyTemplate">
          <template slot="title">
            <icon-svg name="template" class="site-sidebar__menu-icon"></icon-svg>
            <span>模板管理</span>
          </template>
          <el-menu-item index="wmhGalaxyTemplate" @click="$router.push({ name: 'wmhGalaxyTemplate' })">
            <icon-svg name="template" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">模板管理</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="galaxyAigorithmEngineering">
          <template slot="title">
            <icon-svg name="suanfa" class="site-sidebar__menu-icon"></icon-svg>
            <span>算法管理</span>
          </template>
          <el-menu-item index="wmhGalaxyUiVersion" @click="$router.push({ name: 'wmhGalaxyUiVersion' })">
            <icon-svg name="version" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">算法版本管理</span>
          </el-menu-item>
          <el-menu-item index="wmhGalaxyUiUpdateLog" @click="$router.push({ name: 'wmhGalaxyUiUpdateLog' })">
            <icon-svg name="update" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">算法变更记录</span>
          </el-menu-item>
        </el-submenu>

        <el-submenu index="galaxyBase">
          <template slot="title">
            <icon-svg name="base" class="site-sidebar__menu-icon"></icon-svg>
            <span>基础平台</span>
          </template>
          <el-menu-item index="wmhGalaxyTask" @click="$router.push({ name: 'wmhGalaxyTask' })">
            <icon-svg name="renwu" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">任务事件</span>
          </el-menu-item>
          <el-menu-item index="wmhGalaxyCache" @click="$router.push({ name: 'wmhGalaxyCache' })">
            <icon-svg name="redis" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">缓存管理</span>
          </el-menu-item>
          <el-menu-item index="wmhGalaxySearchEngine" @click="$router.push({ name: 'wmhGalaxySearchEngine' })">
            <icon-svg name="es" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">搜索引擎</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
  import SubMenu from './main-sidebar-sub-menu'
  import { isURL } from '@/utils/validate'
  export default {
    data () {
      return {
        dynamicMenuRoutes: []
      }
    },
    components: {
      SubMenu
    },
    computed: {
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      menuList: {
        get () { return this.$store.state.common.menuList },
        set (val) { this.$store.commit('common/updateMenuList', val) }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      }
    },
    watch: {
      $route: 'routeHandle'
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
      this.routeHandle(this.$route)
    },
    methods: {
      // 路由操作
      routeHandle (route) {
        if (route.meta.isTab) {
          // tab选中, 不存在先添加
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          if (!tab) {
            if (route.meta.isDynamic) {
              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
              if (!route) {
                return console.error('未能找到可用标签页!')
              }
            }
            tab = {
              menuId: route.meta.menuId || route.name,
              name: route.name,
              title: route.meta.title,
              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
              iframeUrl: route.meta.iframeUrl || '',
              params: route.params,
              query: route.query
            }
            this.mainTabs = this.mainTabs.concat(tab)
          }
          this.menuActiveName = tab.menuId + ''
          this.mainTabsActiveName = tab.name
        }
      }
    }
  }
</script>
